<template>
  <header>
    <span @click="$back"><van-icon name="arrow-left" color="#fff" size="18" /></span>
    <strong>{{ $t("language.My.column1") }}</strong>
    <span @click="$openPage('/kefu')"><img v-lazy="getImg('kefu.png')" alt="" /></span>
  </header>
  <main class="info">
    <div class="header">
      <img src="@/assets/img/avater.png" alt="" />
      <div class="middle">
        <strong>  {{$t("language.My.nickname")}}: {{ info.nickName }} </strong>
        <strong>ID：{{ info.gameID }}</strong>
      </div>
      <div class="right">
        <!-- <van-button class="right-btn" @click="editdialog('type1')">{{
      $t("language.info.edit")
    }}</van-button> -->
        <van-button class="right-btn" @click="copyToClipboard(info.gameID, proxy)">{{ $t("language.info.copy")
          }}</van-button>
        <span></span>
      </div>
    </div>
    <div class="login">
      {{ $t("language.My.login") }}{{ info.lastLogonDate }}
    </div>
    <ul>
      <li @click="editdialog('type2')">
        <img src="@/assets/img/info1.png" alt="" />
        <div>
          <h3>{{ $t("language.info.icon1") }}</h3>
          <span>{{ info.accounts }}</span>
        </div>
        <van-icon v-if="!info.isModifyAccounts" name="arrow" color="#b5bac8" size="18" />
      </li>
      <li>
        <img src="@/assets/img/info2.png" alt="" />
        <div>
          <h3>{{ $t("language.info.icon2") }}</h3>
          <span>{{ info.countryCode }}{{ info.mobile }}</span>
        </div>
        <i></i>
      </li>
      <li @click="editdialog('type3')">
        <img src="@/assets/img/info3.png" alt="" />
        <div>
          <h3>{{ $t("language.info.icon3") }}</h3>
        </div>
        <van-icon name="arrow" color="#b5bac8" size="18" />
      </li>
      <li @click="editdialog('type4')">
        <img src="@/assets/img/info4.png" alt="" />
        <div>
          <h3>{{ $t("language.info.icon4") }}</h3>
        </div>
        <van-icon name="arrow" color="#b5bac8" size="18" />
      </li>
      <li @click="editdialog('type5')">
        <img src="@/assets/img/info5.png" alt="" />
        <div>
          <h3>{{ $t("language.info.icon5") }}</h3>
          <span>*****</span>
        </div>
        <van-icon name="arrow" color="#b5bac8" size="18" />
      </li>
      <li>
        <img src="@/assets/img/info6.png" alt="" />
        <div>
          <h3>{{ $t("language.info.icon6") }}</h3>
          <span>{{ info.spreaderCode }}</span>
        </div>
        <van-button @click="copyToClipboard(info.spreaderCode, proxy)">{{
      $t("language.info.copy")
    }}</van-button>
      </li>
    </ul>
  </main>
  <div class="dialog">
    <el-dialog width="90%" v-model="initVisible2" :show-close="false">
      <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
        <strong></strong>
        <h4>
          {{ $t("language.initdialog.init2title") }}
        </h4>
        <span @click="initVisible2 = false">
          <el-icon color="#b5b6c8" size="16">
            <CloseBold />
          </el-icon>
        </span>
      </div>
      <div class="dialogmain">
        <template v-if="type1 == 'type1'">
          <el-input v-model="input" :placeholder="$t('language.My.placehold')" />
          <van-button class="confirm" @click="open2">{{
      $t("language.My.btn1")
    }}</van-button>
        </template>
        <template v-if="type1 == 'type2'">
          <el-form ref="accountForm" :model="ChangeAccount" label-width="auto" class="demo-ruleForm"
            label-position="top" status-icon>
            <el-form-item :label="$t('language.My.AcountLabel')" prop="newAccounts" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
              <el-input :placeholder="$t('language.My.placehold1')" v-model="ChangeAccount.newAccounts" />
            </el-form-item>
          </el-form>
          <p class="text">{{ $t("language.My.dialogtext") }}</p>
          <van-button :loading="loading" loading-type="spinner" :disabled="loading" class="confirm"
            @click="AccountChange">{{ $t("language.My.btn2") }}</van-button>
        </template>
        <template v-if="type1 == 'type3'">
          <el-form ref="bangEmailform" :model="bangEmail" label-width="0px" label-position="left" status-icon
            style="width: 100%">
            <el-form-item label="" prop="email" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
              <div class="message">
                <el-icon size="20">
                  <Message />
                </el-icon>
                <el-input v-model="bangEmail.email" :placeholder="$t('language.My.placehold2')" />
              </div>
            </el-form-item>
          </el-form>

          <van-button :loading="loading" loading-type="spinner" :disabled="loading" class="confirm"
            @click="BandEmailSubmit">{{ $t("language.My.btn1") }}</van-button>
        </template>
        <template v-if="type1 == 'type4'">
          <h3>{{ $t("language.initdialog.init3title") }}</h3>
          <el-form ref="bandForm" :model="bandIDform" label-width="auto" class="demo-ruleForm" label-position="top"
            status-icon>
            <el-form-item prop="inviteCode" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
              <el-input clearable :placeholder="$t('language.My.placehold3')" v-model="bandIDform.inviteCode" />
            </el-form-item>
          </el-form>
          <!-- <el-input
            v-model="input"
            :placeholder="$t('language.My.placehold3')"
          /> -->
          <p class="note">{{ $t("language.My.dialogtext2") }}</p>
          <van-button class="confirm" @click="bandsubmit">{{
      $t("language.My.btn2")
    }}</van-button>
        </template>
        <template v-if="type1 == 'type5'">
          <el-form :model="ChangePassword" ref="passwordForm" label-width="0px" class="demo-dynamic">
            <el-form-item prop="oldPassword" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
              <div class="password">
                <el-icon size="20">
                  <Lock />
                </el-icon>
                <el-input clearable v-model="ChangePassword.oldPassword" :placeholder="$t('language.My.placehold4')" />
              </div>
            </el-form-item>
            <el-form-item prop="newPassword" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
              <div class="password">
                <el-icon size="20">
                  <Lock />
                </el-icon>
                <el-input clearable v-model="ChangePassword.newPassword" :placeholder="$t('language.My.placehold5')" />
              </div>
            </el-form-item>
            <el-form-item prop="confirmPassword" :rules="[
      {
        required: true,
        message: $t('language.commontips.empty'),
        trigger: 'blur',
      },
      {
        min: 6,
        max: 20,
        message: t('language.loginhome.tips2'),
        trigger: ['blur'],
      },
    ]">
              <div class="password">
                <el-icon size="20">
                  <Lock />
                </el-icon>
                <el-input clearable v-model="ChangePassword.confirmPassword"
                  :placeholder="$t('language.My.placehold6')" />
              </div>
            </el-form-item>
          </el-form>
          <van-button :loading="loading" loading-type="spinner" :disabled="loading" class="confirm"
            @click="passwordChange">{{ $t("language.My.btn2") }}</van-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch, onActivated, getCurrentInstance } from "vue";
import { useI18n } from "vue-i18n";
import { copyToClipboard } from "@/utils/common";
import { encrypt } from "@/utils/code.ts";
let info: any = reactive({
  accounts: "",
  countryCode: "",
  gameID: "",
  isModifyAccounts: false,
  lastLogonDate: "",
  mobile: "",
  nickName: "",
  score: 0,
  spreaderCode: "",
  vip: 0
});

info = localStorage.getItem('info')
const { proxy } = getCurrentInstance();
const { t } = useI18n();
const open2 = () => {
  ElMessage({
    message: t("language.info.copytips"),
    type: "success",
  });
};
onActivated(() => {
  info = JSON.parse(localStorage.getItem("info"));
});
let loading = ref(false);
// 修改密码
let passwordForm = ref(null);
let ChangePassword = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});
let passwordChange = () => {
  passwordForm.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      let passwordlist = {};
      for (let key in JSON.parse(JSON.stringify(ChangePassword))) {
        passwordlist[key] = encrypt(
          JSON.parse(JSON.stringify(ChangePassword))[key]
        )
          .toString()
          .substring(0, 32);
      }
      passwordlist['id'] = info.gameID
      proxy
        .$post(`/UserCenter/v1.0/User/Password`, passwordlist)
        .then(() => {
          ElMessage({
            type: "success",
            message: t("language.commontips.changetips"),
            duration: 1000,
            onClose: () => {
              initVisible2.value = false;
              passwordForm.value.resetFields();
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};

//修改账户
let accountForm = ref(null);
let ChangeAccount = reactive({
  id: info.gameID,
  newAccounts: "",
});
let initVisible2 = ref(false);
watch(
  () => initVisible2.value,
  () => {
    info = JSON.parse(localStorage.getItem("info"));
    ChangeAccount.newAccounts = info.accounts;
  },
  {
    immediate: true,
    deep: true
  }
);
let AccountChange = () => {

  ChangeAccount.id = info.gameID
  console.log(ChangeAccount, 'trtrr');
  accountForm.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      proxy.$post(
        `/UserCenter/v1.0/User/Accounts`,
        ChangeAccount
      )
        .then(({ data }) => {
          switch (data.code) {
            case 0:
              ElMessage({
                type: "success",
                message: t("language.commontips.changetips"),
                duration: 1000,
                onClose: () => {
                  info.accounts = ChangeAccount.newAccounts;
                  console.log(JSON.stringify(data.data), '0000');
                  if (data.data) {
                    localStorage.setItem("info", JSON.stringify(data.data));
                  }
                  initVisible2.value = false;
                  accountForm.value.resetFields();
                },
              });
              break;
          }

        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};
//绑定邮箱
let bangEmailform = ref(null);
let bangEmail = reactive({
  id: 0,
  email: "",
});
let BandEmailSubmit = () => {
  bangEmailform.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      proxy
        .$post(`/UserCenter/v1.0/User/BindEmail`, bangEmail)
        .then(() => {
          ElMessage({
            type: "success",
            message: t("language.commontips.bangtips"),
            duration: 1000,
            onClose: () => {
              bangEmailform.value.resetFields();
              initVisible2.value = false;
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};
//绑定上级
let bandForm = ref(null);
let bandIDform = reactive({
  id: info.gameID,
  inviteCode: ""
});
let bandsubmit = () => {
  bandForm.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      proxy
        .$post(
          `/UserCenter/v1.0/User/BindInviteCode`,
          bandIDform
        )
        .then(({ data }) => {
          switch (data.code) {
            case 0:
              ElMessage({
                type: "success",
                message: t("language.commontips.changetips"),
                duration: 1000,
                onClose: () => {
                  bandForm.value.resetFields();
                  info.spreaderCode = bandIDform.id;
                  initVisible2.value = false;
                },
              });
              break;
          }

        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};


let type1 = ref("type1");
const input = ref("");
let editdialog = (types: any) => {
  type1.value = types;
  if (type1.value == 'type2' && info.isModifyAccounts) return
  initVisible2.value = true;
};
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};
</script>
<style lang="scss">
.dialog {
  .el-input__wrapper {
    background-color: rgb(39, 42, 48) !important;
    box-shadow: none;
    border: 1px solid #4a4c53;
    height: 40px !important;

    border-radius: 10px;
  }

  .el-input__wrapper.is-focus {
    border-color: rgb(0, 144, 109) !important;
  }

  .el-input__inner {
    color: #fff !important;
  }

  .el-dialog {
    padding: 15px !important;
    background-color: rgb(50, 53, 62) !important;
    border-radius: 10px !important;
  }

  .dialogmain {
    padding-top: 30px;

    .confirm {
      background: #0a906c;
      border: none;
      color: #fff;
      display: block;
      width: 40%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 30px auto 20px;
    }

    .text {
      font-size: 14px;
      color: #b5bac8;
      margin: 14px 0;
    }

    .message {
      width: 100%;
      @include flex(row, flex-start, center);

      .el-icon {
        margin: 0 10px 0 20px;
      }
    }

    .password {
      @include flex(row, flex-start, center);
      width: 100%;

      .el-icon {
        margin: 0 10px 0 20px;
      }
    }

    .password+.password {
      margin-top: 20px;
    }

    h3 {
      font-size: 22px;
      color: #b9bdc9;
      margin-bottom: 30px;
    }

    .note {
      font-size: 14px;
      color: #748494;
      line-height: 27px;
      margin-top: 40px;
    }
  }

  .el-dialog__header {
    padding: 0 !important;
  }
}
</style>

<style scoped lang="scss">
#bigcloser {
  width: 100%;
  @include flex(row, flex-end, center);

  strong {
    display: block;
    width: 28px;
    height: 28px;
  }

  h4 {
    flex: 1;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }

  span {
    display: block;
    width: 28px;
    height: 28px;
    @include flex(row, center, center);
    border: 2px solid #b5b6c8;
    border-radius: 16px;
    margin-right: -7px;
  }
}

header {
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    display: block;
    height: 28px;
    width: 28px;
    @include flex(row, center, center);
    line-height: 28px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.info {
  background-color: #1a1a1a;
  padding: 50px 0px 90px;
  width: 100%;
  min-height: 100vh;
  background-color: rgb(26, 26, 26);

  .header {
    padding: 0px 20px 8px;
    @include flex(row, space-between, center);

    img {
      width: 58px;
      border-radius: 29px;
      margin-right: 25px;
    }

    .middle {
      flex: 1;
      @include flex(column, center, flex-start);

      strong {
        color: #fff;
      }

      strong+strong {
        margin-top: 13px;
      }
    }

    .right {
      width: 90px;
      @include flex(column, center, flex-end);

      .right-btn {
        background: #0a906c;
        border: none;
        color: #fff;
        display: block;
        height: 28px;
        padding: 0 15px;
        border-radius: 5px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
      }

      .right-btn {
        margin-top: 8px;
      }
    }
  }

  .login {
    width: 100%;
    text-align: right;
    padding: 7px 20px;
    color: #95979e;
  }

  ul {
    width: 100%;
    padding: 0 20px;

    li {
      height: 57px;
      margin-top: 8px;
      padding-bottom: 5px;
      @include flex(row, space-between, center);
      border-bottom: 1px solid rgba(74, 76, 83, 0.36470588235294116);

      img {
        width: 33px;
      }

      div {
        flex: 1;
        padding-left: 20px;

        h3 {
          font-size: 16px;
          color: #fff;
          font-weight: normal;
        }

        span {
          font-size: 16px;
          color: #b5bac8;
        }
      }

      > :deep(.van-button) {
        background-color: #0a906c;
        color: #fff;
        display: block;
        height: 28px;
        border: none;
        padding: 0 15px;
        border-radius: 5px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
      }
    }
  }
}
</style>
